<template>
    <p>列表及分页</p>
    <el-table :data="tableData" border style="width: 100%;">
    <el-table-column prop="account" lable="用户名"></el-table-column>
    <el-table-column prop="createTime" lable="注册时间"></el-table-column>
    <el-table-column prop="level" lable="等级"></el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-size="[5,10]"
     layout="total,sizes,prev,pager,next,jumper" :total="total" @size-change="handleSizeChange"
     @current-change="handleCurrentChange">

    </el-pagination>
</template>

<script setup>
import { ref } from 'vue';

const data = Array.from(Array(114),(v,i)=>{
    return {
        account:'uaa' + (i+1),
        createTime:new Date(Date.now() + Math.ceil(Math.random() * 1000)),
        level:Math.ceil(Math.random() * 10)
    }
})

console.log('data',data);

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)


const getData = (page,pageSize) => {
    tableData.value = data.slice((page - 1) * pageSize, page * pageSize)
    total.value = data.length 
}
getData(1,pageSize.value)

const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    getData(currentPage.value,val)
}

const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    getData(val,pageSize.value)
}

</script>